<template>
<div style="margin-top:150px">
  <p>看看你需要多少次能猜中！！</p>
  <p>{{count === 0 ? tips : '你已经猜了'+count+'次了' }}</p>
  <div>
    <el-input placeholder="请输入1到100的整数" 
    v-model="guessNumber" type="number"
    style="width:80%" :disabled="isRight"></el-input>
    <p style="height:.44rem">{{msg}}</p>
  </div>
  <div style="margin-top:40px">
     <el-button type="primary" plain @click="restart">重新开始</el-button> 
     <el-button type="success" plain  @click="compare" :disabled="isRight">确认</el-button>
  </div>
</div>
</template>

<script>
export default {
  name: 'GuessNumber',
  data () {
      return{
          goal:Number,
          guessNumber:'',
          msg:'',
          tips:'开始吧！',
          count:0,
          isRight:false,
          bigNum:100,
          smallNum:1
      }
  },
  mounted(){
     this.goal = this.random();
  },
  methods:{
      compare(){  
          if(!Number(this.guessNumber)||this.guessNumber<0||this.guessNumber>100){
               this.$message.error({
                 message:'请输入1到100的整数!',
                 duration:500

              });
          }else{
             this.count++;
             if(this.guessNumber > this.goal){
                this.bigNum = this.guessNumber;
                this.msg = "您猜大啦！剩余数字范围在"+this.smallNum+"-"+this.bigNum;
             }else if(this.guessNumber < this.goal){
                this.smallNum = this.guessNumber;
                this.msg = "您猜小咯！剩余数字范围在"+this.smallNum+"-"+this.bigNum;
             }else{
                this.isRight = true;
                this.msg = "恭喜您猜对了，正确的数字是"+this.guessNumber+",重新开始下一轮吧！";
             }
             this.guessNumber = '';
          }
      },
      random(){    
         return Math.floor(Math.random()*100)+1;
      },
      restart(){
          this.guessNumber = '';
          this.msg = '';
          this.goal = this.random();
          this.count = 0;
          this.bigNum = 100;
          this.smallNum = 1;
          this.isRight = false;
          this.$message.success({
            message:'已重新开始!',
            duration:500
          })
      }
  }
}
</script>

<style scoped>
</style>
